<template>
    <div>
        <common-banner name="资讯中心" :breads="breads"></common-banner>
        <div class="page-center">
            <h1 class="news-title">{{ newsItem.title }}</h1>
            <div class="news-subtitle">
                <span class="pr-20"><i class="el-icon-date"></i> {{ newsItem.date }}</span>
                <span class="pr-20"><i class="el-icon-user-solid"></i> {{ newsItem.author }}</span>
            </div>

            <div class="news-content mb-60" v-html="newsItem.content"></div>

            <div class="page-center">
                <div class="prev-next-news clearfix">
                    <div class="prev">
                        <a
                            v-if="newsPreItem && newsPreItem.title"
                            :href="
                                newsPreItem && newsPreItem.articleId
                                    ? `/news-detail?id=${newsPreItem.articleId}`
                                    : 'javascript:void(0)'
                            "
                            ><i class="el-icon-arrow-left"></i>{{ (newsPreItem && newsPreItem.title) || '无' }}</a
                        >
                    </div>
                    <div class="next">
                        <a
                            v-if="newsNextItem && newsNextItem.title"
                            :href="
                                newsNextItem && newsNextItem.articleId
                                    ? `/news-detail?id=${newsNextItem.articleId}`
                                    : 'javascript:void(0)'
                            "
                        >
                            {{ (newsNextItem && newsNextItem.title) || '无' }}<i class="el-icon-arrow-right"></i
                        ></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router/index'
const { id, category } = router.currentRoute.query
import CommonBanner from '@/components/CommonBanner.vue'

const menus = ref([
    { name: 'news', label: '新闻中心', to: true },
    { name: 'activity', label: '活动中心', to: true },
])
const breads = ref([])
const currentMenu = menus.value.find((item) => item.name === category)
currentMenu && breads.value.push(currentMenu)
// TODO 从接口中获取
console.log(`当前传入ID：${id}`)
const newsItem = ref({
    title: '6月SINCO最新入库杂质对照品，现货等您来选！',
    date: '2024-06-05',
    articleId: 3,
    source: '',
    author: 'PHYS',
    uv: 568,
    content:
        '今日，“第二十二届世界制药原料中国展”暨“第十七届世界制药机械、包装设备与材料中国展”（CPHI & PMEC China 2024）<h2>在上海新国际博览中心正式启幕！<h2>',
})
// 接口获取后
breads.value.push({ name: newsItem.value.articleId, label: newsItem.value.title, to: false })

const newsPreItem = ref(null)
const newsNextItem = ref({
    title: '6月SINCO最新入库杂质对照品，现货等您来选！',
    date: '2024-06-05',
    articleId: 3,
    source: '',
    author: 'PHYS',
    uv: 568,
    content:
        '今日，“第二十二届世界制药原料中国展”暨“第十七届世界制药机械、包装设备与材料中国展”（CPHI & PMEC China 2024）<h2>在上海新国际博览中心正式启幕！<h2>',
})
</script>
<style lang="scss" scoped>
.news-title {
    display: block;
    padding: 20px 0;
    text-align: center;
    line-height: 180%;
    font-size: 2em;
    color: #000;
}

.news-subtitle {
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
    margin-bottom: 20px;
    font-size: 16px;
    color: #000;
}

.prev-next-news {
    margin: 20px 0;
    .prev {
        float: left;
    }
    .next {
        float: right;
    }
    a {
        color: #000;
        font-size: 16px;
    }
}
</style>
